<template>
  <div class="userLayout">
    <div class="left"></div>
    <div class="container">
      <div>
        <img
          src="@/assets/NFCTLogo.jpg"
          height="80"
          width="258"
          title="NBFCT"
        />
        <p style="font-size: 1.3em; margin-top: 15px; text-align: center">
          网站模板
        </p>
      </div>
      <route-view></route-view>
    </div>
  </div>
</template>

<script>
import RouteView from './RouteView';

export default {
  name: 'UserLayout',
  components: { RouteView },
  data() {
    return {};
  },
  mounted() {
    document.body.classList.add('userLayout');
  },
  beforeDestroy() {
    document.body.classList.remove('userLayout');
  },
};
</script>

<style scoped>
.userLayout {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  background-image: url(@/assets/loginImg.png);
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  color: white;
  background-size: 100% auto;
}
.left {
  flex: 1;
}
.container {
  width: 460px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.loginOpt {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  /* line-height: 2; */
  margin: 18px 0;
}
.loginOpt a {
  font-size: 1em;
  color: white;
  text-decoration: none;
  outline: none;
  cursor: pointer;
}
.loginOpt span {
  margin: 0 10px;
}
.loginSider >>> .el-input-group__prepend {
  padding: 0 10px;
}
.loginQr {
  height: 300px;
  width: 258px;
  text-align: center;
}
.loginForm {
  height: 300px;
  width: 258px;

  text-align: center;
  color: white;
}
.loginForm .el-form-item__label {
  color: white;
}
</style>
